
<template>
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar shape="square" :size="40" :src="squareUrl"></el-avatar>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>{{nick.length>5?nick.substring(0,5):nick}}</el-dropdown-item>
          <hr/>
          <el-dropdown-item @click="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </template>
   
  <script setup lang="ts">
  import { ref } from 'vue'
  import { useStore } from 'vuex'
  const store = useStore()
  const nick = JSON.parse(window.sessionStorage.getItem('currentUser') as any).nick 
  const squareUrl = ref(
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi01.pictn.sogoucdn.com%2F50f0743741ef7bd9&refer=http%3A%2F%2Fi01.pictn.sogoucdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670919133&t=246996ae607cc0848cdd202785849c54'
  )
   
  const logout = () => {
    window.sessionStorage.removeItem('token')
    window.location.reload()
  }
  </script>
   
  <style lang="scss" scoped>
  ::v-deep .el-dropdown-menu__item {
    white-space: nowrap;
  }
  </style>